<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width, initial-scale=1.0">
		<link rel="stylesheet" href="../common/common.css">
		<link rel="stylesheet" href="options.css">

		<script type="module" src="/common/modules/Logger/OverwriteConsoleLog.js" async></script>
		<script async src="./fastLoad.js" type="module"></script>

		<script defer src="../common/common.js" type="module"></script>
		<script defer src="./options.js" type="module"></script>
	</head>

	<body>
		<div class="message-container">
			<div id="messageTips" aria-label="info message" data-i18n data-i18n-aria-label="__MSG_ariaMessageInfo__" class="message-box info invisible fade-hide">
				<span class="message-text"></span>
				<a href="#">
					<button type="button" class="message-action-button micro-button info invisible"></button>
				</a>
				<img class="icon-dismiss invisible" src="/common/img/close.svg" width="24" height="24" tabindex="0" data-i18n data-i18n-aria-label="__MSG_dismissIconDescription__"></span>
			</div>
			<div id="messageInfo" aria-label="info message" data-i18n data-i18n-aria-label="__MSG_ariaMessageInfo__" class="message-box info invisible fade-hide">
				<span class="message-text">Some settings are managed by your administrator and cannot be changed.</span>
				<a href="#">
					<button type="button" class="message-action-button micro-button info invisible"></button>
				</a>
				<img class="icon-dismiss invisible" src="/common/img/close.svg" width="24" height="24" tabindex="0" data-i18n data-i18n-aria-label="__MSG_dismissIconDescription__"></span>
			</div>
			<div id="messageSuccess" aria-label="success message" data-i18n data-i18n-aria-label="__MSG_ariaMessageSuccess__" class="message-box success invisible fade-hide">
				<span class="message-text">That worked!</span>
				<a href="#">
					<button type="button" class="message-action-button micro-button success invisible"></button>
				</a>
				<img class="icon-dismiss invisible" src="/common/img/close.svg" width="24" height="24" tabindex="0" data-i18n data-i18n-aria-label="__MSG_dismissIconDescription__"></span>
			</div>
			<div id="messageError" aria-label="error message" data-i18n data-i18n-aria-label="__MSG_ariaMessageError__" class="message-box error invisible fade-hide">
				<span class="message-text">An error happened.</span>
				<a href="#">
					<button type="button" class="message-action-button micro-button error invisible"></button>
				</a>
				<img class="icon-dismiss invisible" src="/common/img/close-white.svg" width="24" height="24" tabindex="0" data-i18n data-i18n-aria-label="__MSG_dismissIconDescription__"></span>
			</div>
			<div id="messageWarning" aria-label="warning message" data-i18n data-i18n-aria-label="__MSG_ariaMessageWarning__" class="message-box warning invisible fade-hide">
				<span class="message-text">There were some difficulties.</span>
				<a href="#">
					<button type="button" class="message-action-button micro-button warning invisible"></button>
				</a>
				<img class="icon-dismiss invisible" src="/common/img/close.svg" width="24" height="24" tabindex="0" data-i18n data-i18n-aria-label="__MSG_dismissIconDescription__"></span>
			</div>
		</div>
		<form>
			<section class="mobile-incompatible">
				<h1 data-i18n="__MSG_titleGeneral__">Add-on</h1>
				<ul>
					<li>
						<div class="line">
							<input class="setting save-on-change" type="checkbox" id="popupIconColored" name="popupIconColored">
							<label data-i18n="__MSG_optionPopupIconColored__" for="popupIconColored">Colored Icon</label>
						</div>
						<div class="line indent">
							<span class="helper-text" data-i18n="__MSG_optionPopupIconColoredDescr__">Shows a colored icon instead of the black/white icon in the toolbar.</span>
						</div>
					</li>
				</ul>
			</section>

			<section>
				<h1 data-i18n="__MSG_titleQrCodeSetting__">QR code</h1>

				<h2 data-i18n="__MSG_subtitleQrCodeSize__">QR code size</h2>
				<ul id="sizeType" data-type="radiogroup" class="setting" data-optiongroup="qrCodeSize">
					<li>
						<div class="line">
							<input id="qrCodeSizeFixed" type="radio" name="sizeType" value="fixed" class="save-on-input">
							<label data-i18n="__MSG_optionQrCodeSizeFixed__" for="qrCodeSizeFixed">Fixed size: </label>

							<input data-i18n="__MSG_optionPixelAbbreviation__" class="setting save-on-change" data-optiongroup="qrCodeSize" type="number" id="qrCodeSizeFixedValue" min="160" step="5" size="5" name="size">
							<label for="qrCodeSizeFixedValue">px</label>
						</div>
					</li>

					<li>
						<div class="line">
							<input id="qrCodeSizeAuto" type="radio" name="sizeType" value="auto" class="save-on-input">
							<label data-i18n="__MSG_optionQrCodeSizeAuto__" for="qrCodeSizeAuto">Automatically adjust size</label>
						</div>
						<div class="line indent">
							<span data-i18n="__MSG_optionQrCodeSizeAutoHelper__" class="helper-text">Mostly useful on mobile devices, where the QR code opens in a new tab.</span>
						</div>
					</li>

					<li>
						<div class="line">
							<input id="qrCodeSizeRemember" type="radio" name="sizeType" value="remember" class="save-on-input">
							<label data-i18n="__MSG_optionQrCodeSizeRemember__" for="qrCodeSizeRemember">Remember last size</label>
						</div>
					</li>
				</ul>

				<h2 data-i18n="__MSG_subtitleMisc__">Miscellaneous settings</h2>
				<ul>
					<li>
						<div class="line">
							<label data-i18n="__MSG_optionQrQuietZone__" for="qrQuietZone">QR quiet zone: </label>
							<input class="setting save-on-input" type="range" value="1" min="0" max="5" step="1" id="qrQuietZone" name="qrQuietZone">
							<span>
								<span id="qrQuietZoneStatus">(1 square)</span>
							</span>
						</div>

						<li class="line helper-text">
							<span data-i18n="__MSG_optionQrQuietZoneDescr__">The number of border modules around the QR code colored in the background color.</span>
							<a class="learn-more" data-i18n="__MSG_optionLearnMore__" data-i18n-href="__MSG_optionQrQuietZoneDescrLink__" href="https://github.com/rugk/offline-qr-code/wiki/FAQ#what-is-a-quiet-zone">Learn more</a>
						</div>
					</li>

					<li>
						<div class="line">
							<label data-i18n="__MSG_optionQrCodeColor__" for="qrColor">QR code color: </label>
							<input class="setting save-on-change trigger-on-update" type="color" id="qrColor" name="qrColor">
						</div>
					</li>

					<li>
						<div class="line">
							<label data-i18n="__MSG_optionQrCodeBackgroundColor__" for="qrBackgroundColor">QR code background color: </label>
							<input class="setting save-on-change trigger-on-update" type="color" id="qrBackgroundColor" name="qrBackgroundColor">
						</div>
					</li>

					<li class="message-container">
						<div id="messageContrast" aria-label="info message" data-i18n data-i18n-aria-label="__MSG_ariaMessageInfo__" class="message-box info invisible fade-hide">
							<span class="message-text"></span>
							<a href="#">
								<button type="button" class="message-action-button micro-button info invisible"></button>
							</a>
							<img class="icon-dismiss invisible" src="/common/img/close.svg" width="24" height="24" tabindex="0" data-i18n data-i18n-aria-label="__MSG_dismissIconDescription__"></span>
						</div>
					</li>

					<li>
						<div class="line">
							<label data-i18n="__MSG_optionErrorCorrection__" for="qrErrorCorrection">Error correction level: </label>
							<select id="qrErrorCorrection" class="setting save-on-change" name="qrErrorCorrection" size="0">
								<option data-i18n="__MSG_optionEcLow__" value="L">Low (7%)</option>
								<option data-i18n="__MSG_optionEcMedium__" value="M">Medium (15%)</option>
								<option data-i18n="__MSG_optionEcQuartile__" value="Q">Quartile (25%)</option>
								<option data-i18n="__MSG_optionEcHigh__" value="H">High (30%)</option>
							</select>
						</div>
						<li class="line helper-text">
							<span data-i18n="__MSG_optionErrorCorrectionDescr__">
								If a QR code is damaged or some parts are missing, it can often still be scanned.
								The higher the value the more the machine is able to understand.
							</span>
							<a class="learn-more" data-i18n="__MSG_optionLearnMore__" data-i18n-href="__MSG_optionErrorCorrectionDescrLink__" href="https://en.wikipedia.org/wiki/QR_code#Error_correction">Learn more</a>
						</div>
					</li>
				</ul>
			</section>

			<section>
				<h1 data-i18n="__MSG_titleAddonBehavior__">Addon behavior</h1>
				<ul>
					<li>
						<div class="line">
							<input class="setting save-on-change" type="checkbox" id="autoGetSelectedText" name="autoGetSelectedText">
							<label data-i18n="__MSG_optionAutoGetSelectedText__" for="autoGetSelectedText">Automatically use text selected on website</label>
						</div>
					</li>

					<li>
						<div class="line">
							<input class="setting save-on-change" type="checkbox" id="monospaceFont" name="monospaceFont">
							<label data-i18n="__MSG_optionUseMonospaceFont__" for="monospaceFont">Use monospace font</label>
						</div>
					</li>

					<li>
						<div class="line">
							<input class="setting save-on-change" type="checkbox" id="debugMode" name="debugMode">
							<label data-i18n="__MSG_optionDebugMode__" for="debugMode">Enable debug mode</label>
						</div>
						<div class="line indent">
							<span data-i18n="__MSG_optionDebugModeDescr__" class="helper-text">This is only useful to get more detailed logging output in the console for reporting bugs, etc.</span>
						</div>
					</li>
				</ul>
			</section>

			<div>
				<hr /><br />
				<button data-i18n="__MSG_optionsResetButton__" type="button" id="resetButton">Reset all settings to defaults</button>
			</div>
		</form>
		<p class="helper-text">
			<span data-i18n="__MSG_translatorCredit__" data-opt-i18n-keep-children>
				This add-on has been translated into English by
				<a data-i18n="__MSG_translatorUsername__" data-i18n-href="__MSG_translatorLink__" href="https://github.com/XY">somone</a>.
			</span>
			<span data-i18n="__MSG_contributorsThanks__" data-opt-i18n-keep-children>
				Also thanks to
				<a data-i18n="__MSG_contributorsThanksLinkText__" data-i18n-href="__MSG_contributorsThanksLink__" href="https://github.com/XY">all other contributors</a>.
			</span>
		</p>
	</body>
</html>
